@mixin border-t-1px($color:#d8d8d8) {
    position: relative;

    &:before {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border-top: 1px solid $color;
        content: ' ';
    }
}

@mixin border-r-1px($color:#d8d8d8) {
    position: relative;

    &:after {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 100%;
        border-right: 1px solid $color;
        content: ' ';
    }
}

@mixin border-b-1px($color:#d8d8d8) {
    position: relative;

    &:before {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid $color;
        content: ' ';
    }
}

@mixin border-l-1px($color:#d8d8d8) {
    position: relative;

    &:after {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100%;
        border-left: 1px solid $color;
        content: ' ';
    }
}

@mixin border-none() {
    &:before {
        display: none;
    }
    &:after {
        display: none;
    }
}

@mixin bg-image($url) {
    background-image: url($url + "@2x.png");

    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url($url + "@3x.png");
    }
}
